<template>
    <view class="">
        <view class="userData">
            <view v-for="(item, index) in urls" class="userList" @click="pageUrl">
                <u-avatar :src="item"></u-avatar>
                <text class="userName">某某某</text>
            </view>
            <view class="userList">
                <text class="img">+</text>
            </view>
            <view class="userList">
                <text class="img">-</text>
            </view>
        </view>


        <u-cell-group>
            <u-cell title="备注名" :isLink="true" size="large" @click="remarkShow = true">
                <text slot="value">某人</text>
            </u-cell>
            <u-cell title="消息传输方式" :isLink="true" size="large" @click="transferShow = true"></u-cell>
            <u-cell title="查找聊天记录" :isLink="true" size="large" @click="recordUrl"></u-cell>
            <u-cell title="清空聊天记录" :isLink="true" size="large" @click="clearShow = true"></u-cell>
        </u-cell-group>

        <u-cell-group>
            <u-cell title="阅后即焚" size="large">
                <u-switch slot="value" v-model="value" activeValue="1" inactiveValue="0"></u-switch>
            </u-cell>
            <u-cell title="置顶聊天" size="large">
                <u-switch slot="value" v-model="value" activeValue="1" inactiveValue="0"></u-switch>
            </u-cell>
            <u-cell title="消息免打扰" size="large">
                <u-switch slot="value" v-model="value" activeValue="1" inactiveValue="0"></u-switch>
            </u-cell>
            <u-cell title="阅读后发送通知" size="large">
                <u-switch slot="value" v-model="value" activeValue="1" inactiveValue="0"></u-switch>
            </u-cell>
        </u-cell-group>

        <!-- 清空聊天记录 -->
        <u-modal @cancel="clearShow = false" :show="clearShow" title="清空聊天记录" content='是否清空与该人的本地聊天记录？且无法漫游到。'
            :showCancelButton="true"></u-modal>
        <!-- 添加备注 -->
		<u-modal :show="remarkShow" title="请输入备注名称" :showCancelButton="true" @cancel="remarkShow = false">
			<view class="slot-content">
				<u-input></u-input>
			</view>
		</u-modal>
        <!-- 消息传输方式 -->
        <u-action-sheet :actions="transferList" title="消息传输方式" :show="transferShow"
            @close="transferShow = false"></u-action-sheet>
    </view>
</template>

<script>
export default {
    data() {
        return {
            indexList: [],
            urls: [
                'https://cdn.uviewui.com/uview/album/1.jpg',
                'https://cdn.uviewui.com/uview/album/2.jpg',
                'https://cdn.uviewui.com/uview/album/3.jpg',
                'https://cdn.uviewui.com/uview/album/4.jpg',
                'https://cdn.uviewui.com/uview/album/5.jpg',
                'https://cdn.uviewui.com/uview/album/6.jpg',
                'https://cdn.uviewui.com/uview/album/7.jpg',
                'https://cdn.uviewui.com/uview/album/8.jpg',
                'https://cdn.uviewui.com/uview/album/9.jpg',
                'https://cdn.uviewui.com/uview/album/10.jpg',
            ],
            value: "0",
            clearShow: false,
            remarkShow: false,
            transferList: [
                {
                    name: '明文传输',
                    // color: '#ffaa7f',
                    fontSize: '15'
                },
                {
                    name: 'AES加密',
                    fontSize: '15'
                    // disabled: true
                },
                {
                    name: 'RSA加密',
                    fontSize: '15'
                }
            ],
            transferShow: false
        }
    },
    onLoad() {
        // this.loadmore()
    },
    methods: {
        close() {
            this.remarkShow = false
            // console.log('close');
        },
        pageUrl() {
            uni.navigateTo({
                url: '../information/index',
                animationType: 'pop-in',
                animationDuration: 300
            })
        },
        recordUrl() {
            uni.navigateTo({
                url: '../record/index',
                animationType: 'pop-in',
                animationDuration: 300
            })
        }
    },
}
</script>

<style lang="scss">
.userData {
    width: 100%;
    margin: 10px 2px;

    .userList {
        display: inline-block;
        width: calc(100% / 5);
        text-align: center;

        .u-avatar {
            margin: auto;
        }

        .userName {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .img {
            margin: auto;
            display: inline-block;
            border: 1px #696969 dashed;
            border-radius: 100px;
            width: 40px;
            height: 40px;
            line-height: 35px;
            font-size: 25px;
            color: #696969;
        }
    }
}

.u-cell-group {
    margin-top: 20px;
}
</style>